<template>
<div style="overflow:hidden;background-color: #ffffff;height: 6vh;padding: 10px 20px">
  <span style="font-size: 20px;line-height: 60px;font-weight: bold">用户管理</span>
  <el-button type="primary" style="float: right;margin-top: 10px">新建用户</el-button>
</div>
  <el-card style="height: 70px;margin: 10px;">
    <el-form :inline="true">
    <el-form-item label="用户搜索">
      <el-input placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="用户状态" style="width: 270px">
      <el-select placeholder="请选择用户状态" style="width: 270px">
          <el-option label="正常" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item>
        <el-button @click="" type="danger">重置</el-button>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

<el-card style="margin: 10px;">
  <el-table :data="userData" stripe style="width: 100%">
    <el-table-column type="index" prop="id" label="编号" width="80px"  align="center"></el-table-column>
    <el-table-column prop="username" label="用户名" align="center"></el-table-column>
    <el-table-column prop="phone" label="手机号"  align="center"></el-table-column>
    <el-table-column prop="createTime" label="加入时间"  align="center"></el-table-column>
    <el-table-column prop="status" label="用户状态"  align="center">
      <template #default="scope">
        <el-switch v-model="scope.row.status" active-value="1" inactive-value="0" active-text="正常" inactive-text="禁用"
                   style="--el-switch-on-color:#3C82F5; --el-switch-off-color: #909399"
        />
      </template>
    </el-table-column>
    <el-table-column prop="actions" label="操作" width="180" align="center">
      <template #default="scope">
        <el-button type="text" size="mini" @click="handleEdit(scope.row)">密码重置</el-button>
        <el-button type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-card>


</template>


<script setup>
import {ref} from "vue"

const userData = [
  {
    id: 1,
    username: 'Toyota',
    phone: '12345678901',
    createTime: '2022-05-01',
    status: '1',
  },
  {
    id: 2,
    username: 'Honda',
    phone: '12345678902',
    createTime: '2022-05-02',
    status: '0',
  },
  {
    id: 3,
    username: 'BMW',
    phone: '12345678903',
    createTime: '2022-05-03',
    status: '1',
  },
  {
    id: 4,
    username: 'Mercedes',
    phone: '12345678904',
    createTime: '2022-05-04',
    status: '0',
  },
  {
    id: 5,
    username: 'Audi',
    phone: '12345678905',
    createTime: '2022-05-05',
    status: '1',
  },
]
</script>


<style scoped>


</style>